<div class="step say-step panel panel-default">
	<div class="panel-heading">
		<step-heading><small>{{step.phrase.length > 40 ? step.phrase.substring(0, 40) + "..." : step.phrase.substring(0, 40) }}</small></step-heading>
	</div>
	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<div class="row">
			<div class="col-lg-12 col-md-12">
				<form lookup-context name="form" novalidate>
					<div class="form-group">
						<label class="help-tooltip" tooltip="{{'sayStepTextLabelPopover' | translate}}" tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{'sayStepTextLabel' | translate}}</label>
						<textarea ng-model='step.phrase' lookup-target name="phrase" class="form-control" required></textarea>
						<div ng-show="form.phrase.$invalid" class="validation-error pull-left">{{'sayStepTextValidationError' | translate}}</div>
					</div>
					<div class="form-group pull-right">
						<variable-lookup variable="step.phrase" view="standalone"></variable-lookup>
					</div>
				</form>
			</div>
		</div>


		<i ng-click='step.iface.optionsVisible = !step.iface.optionsVisible' class='fa fa-cog rvd-clickable' ng-class="{'rvd-active': step.iface.optionsVisible }"></i>
		<div collapse='!step.iface.optionsVisible'>
			<br/>
			<div class="row">
				<div class="col-lg-5  form-group language">
					<div class="input-group">
						<span class="input-group-addon ">{{'sayStepLanguageLabel' | translate}}</span>
						<select ng-model='step.language' auto-clear ng-options='language.name as language.text for language in languages'  id="languageSelect" class="form-control say-language-dropdown" >
							<option value=""></option>
						</select>
					</div>
				</div>
				<div class="col-lg-5 form-group btn-toolbar voice" role="toolbar">
					  <span class="btn-group">
						<button ng-click='step.voice="man"' ng-class="{active:step.voice=='man'}"  type="button" class="btn btn-default"><i class='fa fa-male'></i></button>
						<button ng-click='step.voice="woman"' ng-class="{active:step.voice=='woman'}" type="button" class="btn btn-default"><i class='fa fa-female'></i></button>
					  </span>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 loop">
					<div class="input-group">
						<span class='input-group-addon help-tooltip' tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'sayStepLoopTooltip' | translate}}">{{'sayStepLoopLabel' | translate}}</span>
						<input ng-model='step.loop' auto-clear type='number' class='form-control' placeholder="{{'sayStepLoopInputPlaceholder' | translate}}" />
					</div>
					<div ng-show="step.loop==0" class="validation-warning"><i class="fa fa-warning step-warning-icon"></i> {{'sayStepLoopNeverendingWarning' | translate}}</div>
				</div>
			</div>
		</div>


	</div>
</div>
